<template>
  <div class="purse">
    <div class="purse-header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/agent/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的钱包</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="purse-main clearfloat">
      <div class="main_left fl">
        <div class="user_info">
          <el-avatar :size="70" :src="baseUrl + '/storage/upload/' + $store.state.user.img"></el-avatar>
          <template v-if="$store.state.user.vip">
            <template v-if="$store.state.user.vip">
              <div class='info-vip' >
                <el-popover
                  placement="right"
                  title="当前会员等级权益"
                  width="300"
                  trigger="hover"
                  v-if="$store.state.user.vip != 0"
                  >
                  <div class='vip_Introduction'>
                    <ul>
                      <li><span>1，案件即时结算。</span></li>
                      <li><span>2，推荐新代理人完成案件，可获得奖励。</span></li>
                      <li><span>3，会员成为导师后可带徒弟，徒弟案件结算费用的50%作为指导费。</span></li>
                    </ul>
                  </div>
                  <i slot="reference" class='el-icon-info orange ml10'></i>
                </el-popover>
              </div>
              
            </template>
            <div class="expire">
              <span>到期时间：</span>
              <span >{{ $store.state.user.vip_expire_time | formatTime}}</span>
            </div>
            <el-button  class="renewal" @click="renewal">续费</el-button>
          </template>
          <!-- <div v-else>
            <el-button type="primary" class="upgradeVIP">升级VIP</el-button>
          </div> -->
          <div class="money">
            <div class="frozenCoin clearfloat">
              <span class="label">冻结金额：</span><span>{{frozenCoin}}元</span>
              <el-popover
                placement="right"
                title="冻结金额说明"
                width="300"
                trigger="hover"
                >
                <span>冻结金额为近<font class='font_success'>7</font>天的结算金额，每笔结算金额<font class='font_success'>7</font>天后自动解冻为可提现金额。</span>
                <i slot="reference" class='el-icon-info orange fr'></i>
              </el-popover>
            </div>
            <div class="coin clearfloat">
              <span class="label">我的余额：</span><span>{{coin}}元</span>
              <el-button  class="cashing-btn fr" @click="cashing">提现</el-button>
            </div>
          </div>

        </div>
        <div class="bg">

        </div>
      </div>
      <div class="main_right fr ">
        <div class="herder clearfloat">
          <span class="title fl">我的余额明细</span>
          <div class="fr btns">
            <el-select
              v-model="detailTypes"
              multiple
              collapse-tags
              @change='queryTypes'
              placeholder="选择明细类型查询">
              <el-option
                v-for="item in detailTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="createdTime"
              unlink-panels
              type="daterange"
              range-separator="至"
              format='yyyy-MM-dd'
              value-format='yyyy-MM-dd'
              start-placeholder="开始日期"
              @change='confirmQuery'
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <!-- 
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
          infinite-scroll-delay='1000'
          infinite-scroll-distance='40'
          infinite-scroll-immediate='false'
         -->
        <el-table
          v-show="showTable"
          :data="detailData"
          ref="table"
          stripe
          border
          style="width: 100%"
          height='100%'>
          <el-table-column prop="number" label="编号" align="center">
            <!-- <template slot-scope="scope">
              {{ scope.row | payMethod }}
            </template> -->
          </el-table-column>
          <el-table-column prop="type" label="明细类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.type | agentPurseType }}
            </template>
          </el-table-column>
          <el-table-column prop="money" align="center" label="金额">
            <template slot-scope="scope">
              <span :class="scope.row.money >= 0 ? 'font_success' : 'font_danger'">{{ scope.row.money > 0 ? `+${scope.row.money}` : scope.row.money}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" align="center" label="时间">
            <template slot-scope='scope'>
              {{ scope.row.created_at}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <withdrawDialog ref="withdrawDialog" @refresh='refresh'></withdrawDialog>
  </div>
</template>

<script>
import moment from 'moment'
import withdrawDialog from './components/withdrawDialog'
import { detailTypeOptions } from './components/config'
export default {
  components: {
    withdrawDialog,
    // frozeeDetail
  },
  data () {
    
    return {
      frozenCoin: 0,
      coin: 0,
      detailTypes: '',
      detailTypeOptions: detailTypeOptions,
      createdTime: [],
      detailData: [],
      paramsByPurse: {
        is_frozee: 0,
        type: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17'
      },
      showTable: true,
      noMore: false,
      dom: null,
      page: 1,
      baseUrl: global.baseurl,
    }
  },
  computed: {
    disabled () {
      return this.noMore
    },
  },
  mounted() {
    
    // 获取需要绑定的table
    this.dom = this.$refs.table.bodyWrapper
    this.dom.addEventListener('scroll', () => {
      // 滚动距离
      let scrollTop = this.dom.scrollTop
      // 变量windowHeight是可视区的高度
      let windowHeight = this.dom.clientHeight || this.dom.clientHeight
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
      if (scrollTop + windowHeight === scrollHeight) {
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据

        if (!this.noMore) {
          this.load()
        }
      }
    })

  },
  created () {
    // 默认查询当月明细
    let nowTiem = {
      start_time: `${moment().format("YYYY-MM")}-01`,
      end_time: `${moment().format("YYYY-MM")}-31`,
    }
    // this.paramsByPurse.start_time = `${moment().format("YYYY-MM")}-01`
    // this.paramsByPurse.end_time = `${moment().format("YYYY-MM")}-31`
    this.createdTime[0] = nowTiem.start_time
    this.createdTime[1] = nowTiem.end_time
    this.paramsByPurse.start_time = this.createdTime[0]
    this.paramsByPurse.end_time = this.createdTime[1]
    this.getDetailsData(this.paramsByPurse)
    this.queryBalance()
    // this.getVipLogo()
  },
  methods:{
    renewal () {
      // 购买vip
      this.$router.replace({
        name: 'payment',
        query: {
          type: 'buyVip',
          vip: btoa('vip1'),
          from: this.$route.path
        }
      })
    },
    cashing () {
      this.queryBalance()
      let data = {
        coin: this.coin,
        frozenCoin: this.frozenCoin
      }
      this.$refs.withdrawDialog.show(data)
    },
    confirmQuery () {
      if (this.createdTime) {
        this.paramsByPurse.start_time = this.createdTime[0]
        this.paramsByPurse.end_time = this.createdTime[1]
        this.getDetailsData(this.paramsByPurse)
      } else {
        this.getDetailsData()
      }
    },
    queryTypes (value) {
      if (value) {
        this.paramsByPurse.type = value.join(',')
      } else {
        this.paramsByPurse.type = '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17'
      }
      this.getDetailsData(this.paramsByPurse)
    },
    // 获取明细数据
    getDetailsData (pParams, scrollData) {
      let params = {

      }
      if (pParams) {
        params = {...params, ...pParams, ...this.paramsByPurse}
      }

      this.$axios.get('api/drawing/wallet/agent_detail', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {

          if (scrollData) {
            let data = res.data.data
            if (data.length == 0) {
              this.noMore = true
            }
            this.detailData = this.detailData.concat(data)
          } else {
            this.detailData = res.data.data
            this.dom.scrollTop = this.dom.scrollTop - 100
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取余额
    queryBalance () {
      this.$axios.get('api/drawing/wallet').then(res => {
        if (res.data.code == 200) {
          this.coin = res.data.data.coin
          this.frozenCoin = res.data.data.frozenCoin
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      })
    },
    refresh() {
      let nowTiem = {
        start_time: `${moment().format("YYYY-MM")}-01`,
        end_time: `${moment().format("YYYY-MM")}-31`,
      }
      this.getDetailsData(nowTiem)
      this.queryBalance()
    },
    load() {
      this.page ++
      this.paramsByPurse.page = this.page
      this.getDetailsData(this.paramsByPurse, true)
    },
  }
}
</script>

<style lang='less'>
  .purse {
    width: 90%;
    height: 100%;
    min-height: 450px;
    padding: 30px;
    margin: 0 auto;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    &-header {
      height: 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child { 
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
        
      }
      border-bottom:2px solid #e5e5e5;
      box-sizing: border-box;
    }

    &-main {
      margin-top: 30px;
      width: 100%;
      box-sizing: border-box;
      height:calc(100% - 75px);
      .main_left {
        width:300px;
        height: 100%;
        background:linear-gradient(0deg,rgba(117,185,255,1) 0%,rgba(22,137,255,1) 100%);
        
        .user_info {
          height: 330px;
          box-sizing:border-box;
          padding-top: 40px;
          .el-avatar {
            margin: 0 auto;
            display: block;
          }

          .info-vip {
            height: 28px;
            width: 29px;
            margin: 17px auto 0;
            background:url('../../../assets/img/图标.png') no-repeat;
            background-position:-94px -32px;
            position: relative;
            .el-icon-info {
              position: absolute;
              right: -20px;
              top: 8px;
            }
            
          }
          .expire {
            font-size:12px;
            color:rgba(255,255,255,1);
            margin: 12px auto 0;
            width: 130px;
            text-align: center;
          }
          .upgradeVIP {
            padding: 7px 24px 7px 23px;
            background: #0090ff;
            display: block;
            margin: 17px auto 0;
            border-radius: 0px;
          }
          .renewal {
            font-size: 12px;
            padding: 4px 18px;
            background: #FFA200;
            border-radius: 10px;
            margin: 11px auto 0;
            display: block;
            border-color: #FFA200;
            color: #fff;
          }
          .money {
            height: 90px;
            width: 270px;
            margin: 20px auto 0;
            padding: 20px 8px 0px 8px;
            border-top: 1px solid rgba(255,255,255,1);
            box-sizing: border-box;

            .frozenCoin {
              font-size: 15px;
              color: #FC8200;
            }
            .coin {
              font-size: 17px;
              color: #002D88;
              line-height: 17px;
              margin-top: 5px;
              
              .cashing-btn {
                font-size: 12px;
                padding: 3px 18px;
                background: #2368B0;
                border-radius: 10px;
                border-color: #2368B0;
                color: #fff;
              }
            }
            .label {
              color: #fff;
            }
          }
        }
        .bg {
          height: calc(100% - 330px);
          background: url('../../../assets/img/V.png') no-repeat;
        }
      }

      .main_right {
        width: calc(100% - 300px);
        height: 100%;
        padding: 0 0 0 27px;
        display: flex;
        flex-direction: column;

        .herder {
          min-height: 60px;
          width: 100%;
         
          .title {
            display: inline-block;
            padding-top: 12px;
            font-size: 20px;
            color:rgba(72,72,72,1);
            margin-bottom: 10px;
          }
          .btns {
            // margin-top: 10px;
          }
          .el-select {
            margin-right: 10px;
            margin-bottom: 10px;
          }
          .el-range-editor {
            margin-bottom: 10px;
          }
        }
        .el-table {
        }
      }


    }
  }
  .vip_Introduction {
    margin-top: 10px;
    ul {
      padding-left: 10px;
      li {
        list-style: none;
        span {
          font-size: 14px;
        }
      }
    }
  }
</style>